<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>${loginUser.name}-个人中心</title>
    <script src="${pageContext.request.contextPath}/jq/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/jq/jquery.growl.js"></script>
    <link href="${pageContext.request.contextPath}/jq/jquery.growl.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bcss/bootstrap.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        body{
            background-color: #e6dfc8;
        }
        .container-fluid{

        }
        .img-thumbnail{
            margin-top: 160px;
            margin-left: 50px;
            margin-bottom: -20px;
            width: 200px;
            height: 200px;
        }
        #top{
            background-color: white;
            height: 340px;
            background-image: url("${pageContext.request.contextPath}/img/bkq.png");
            color: white;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            -moz-background-size: cover;
            -ms-background-size: cover;
        }
        .user_name{
            margin-left: 270px;
            margin-top: -35px;
        }
        #main{
            /*background-color: white;*/
            margin-top: 30px;
        }
        #main_left{
            border-left: white 5px solid;
            border-right: white 5px solid;
        }
        .table{

        }
    </style>
    <script>
        $(function () {

        })
    </script>
</head>
<body>
      <div class="header-panel">
          <%@include file="/WEB-INF/jsp/header.jsp"%>
      </div>
      <div class="container-fluid text-center">
          <div id="top">
              <div class="text-left">
              <img src="${pageContext.request.contextPath}/img/${loginUser.headerImg}" class="img-thumbnail">
                  <div class="user_name">
                      <span>
                          <h2>${loginUser.name}</h2>
                      </span>
                  </div>
              </div>
          </div>
          <div id="main">
              <div id="main_left">
                 <h3 style="color:seagreen;">个人信息</h3>
                  <table class="table">
                      <tr>
                          <th>ID(用户序列)</th>
                          <td>${loginUser.id}</td>
                      </tr>
                      <tr>
                          <th>昵称</th>
                          <td>${loginUser.name}</td>
                      </tr>
                      <tr>
                          <th>账号</th>
                          <td>${loginUser.username}</td>
                      </tr>
                      <tr>
                          <th>性别</th>
                          <td>${loginUser.sex}</td>
                      </tr>
                      <tr>
                          <th>电话</th>
                          <td>${loginUser.phone}</td>
                      </tr>
                      <tr>
                          <th>邮箱</th>
                          <td>${loginUser.email}</td>
                      </tr>
                      <tr>
                          <th>地址</th>
                          <td>${loginUser.address}</td>
                      </tr>
                      <tr>
                          <th>账户余额</th>
                          <td>${loginUser.balance}</td>
                      </tr>
                      <tr>
                          <th>
                            操作
                          </th>
                          <td>
                              <div class="btn btn-success" data-toggle="modal" data-target="#mdf">我要修改信息</div>
                              <div class="btn btn-danger" data-toggle="modal" data-target="#changePassword">修改密码</div>
                              <div class="btn btn-warning" data-toggle="modal" data-target="#pay">冲点小钱</div>
                          </td>
                          <td>

                          </td>
                      </tr>
                  </table>
              </div>
              <div id="main_right">

              </div>
          </div>
      </div>
      <div class="modal-footer">
          <%@include file="/WEB-INF/jsp/footer.jsp"%>
      </div>
      <!-- Modal -->
      <div class="modal fade" id="mdf" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="staticBackdropLabel">个人信息修改</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <table class="table">
                          <tr class="form-group">
                              <th>ID(用户序列)</th>
                              <td>
                                  ${loginUser.id}
                              </td>
                          </tr>
                          <tr class="form-group">
                              <th>昵称</th>
                              <td>
                                  <input type="text" value="${loginUser.name}" id="name" class="form-control">
                              </td>
                          </tr>
                          <tr class="form-group">
                              <th>账号</th>
                              <td>${loginUser.username}</td>
                          </tr>
                          <tr class="form-group">
                              <th>性别</th>
                              <td>
                                  <c:if test="${loginUser.sex.equals('男')}">
                                      <input type="radio" name="sex" value="男" checked>男
                                      <input type="radio" name="sex" value="女">女
                                  </c:if>
                                  <c:if test="${loginUser.sex.equals('女')}">
                                      <input type="radio" name="sex" value="男">男
                                      <input type="radio" name="sex" value="女" checked>女
                                  </c:if>
                              </td>
                          </tr>
                          <tr class="form-group">
                              <th>电话</th>
                              <td>
                                  <input type="text" value="${loginUser.phone}" id="phone" class="form-control">
                              </td>
                          </tr>
                          <tr class="form-group">
                              <th>邮箱</th>
                              <td>
                                  <input type="text" value="${loginUser.email}" id="email" class="form-control">
                              </td>
                          </tr>
                          <tr class="form-group">
                              <th>地址</th>
                              <td>
                                  <input type="text" value="${loginUser.address}" id="address" class="form-control">
                              </td>
                          </tr>
                      </table>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="mdf()">确定修改</button>
                  </div>
              </div>
          </div>
      </div>

      <div class="modal fade" id="pay" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="payLabel">氪金吧，少年</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                       <label class="form-group">
                           你要氪多少？
                           <input type="text" id="pay_money" class="form-control">
                       </label>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary"  data-dismiss="modal" onclick="pay('<%=request.getContextPath()%>')">确定充值</button>
                  </div>
              </div>
          </div>
      </div>

      <div class="modal fade" id="changePassword" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h5 class="modal-title" id="changePasswordLabel">听说你要修改密码？</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="cancel()">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <div id="one">
                      <label class="form-group">
                          请输入原来的密码：
                          <input type="password" id="old_password" class="form-control">
                      </label>
                      </div>
                      <div id="two" style="display: none">
                          <label class="form-group">
                              请输入新的密码：
                              <input type="password" id="new_password" class="form-control">
                          </label><br>
                          <label class="form-group">
                              请再次输入新密码：
                              <input type="password" id="re_new_password" class="form-control">
                          </label><br>
                          <input type="button" value="立刻修改" data-dismiss="modal" class="btn btn-primary" onclick="changePassword()">
                      </div>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="cancel()">取消</button>
                      <button type="button" class="btn btn-primary"  onclick="next()" id="next">下一步</button>
                  </div>
              </div>
          </div>
      </div>
</body>
<script>
     function pay(url) {
        var money = $("#pay_money").val();
        layer.open({
            title:"请手机连接教室wifi后扫描",
            content:url+"/user/recharge?money="+money,
            type:2,
            area:['450px','500px'],
            cancel:function () {
                window.location.reload();
            }
        })
     }

     function mdf() {
        var name = $("#name").val();
        var sex=$("input:radio[name='sex']:checked").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var address = $("#address").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/user/mdfUserInfo",
            method:"POST",
            data:{
                name:name,
                sex:sex,
                phone:phone,
                email:email,
                address:address,
                username:"${loginUser.username}"
            },
            dataType:"JSON",
            success:function (data) {
                 if(data.message=="ok"){
                     alert("操作成功！")
                     window.location.reload();
                 }else {
                     alert("修改失败")
                 }
            }
        })
     }

     function next() {
         $.ajax({
             url:"${pageContext.request.contextPath}/user/checkPassword",
             method: "POST",
             data: {
                 password:$("#old_password").val(),
                 username:"${loginUser.username}"
             },
             dataType: "JSON",
             success:function (data) {
                 if(data.message=="ok") {
                     $("#next").hide()
                     $("#one").hide()
                     $("#two").show()
                 }else {
                     alert("密码不正确！")
                 }
             }
         })
     }

     function cancel() {
         $("#next").show()
         $("#one").show()
         $("#two").hide()
     }

     function changePassword() {

         var new_password = $("#new_password").val();
         var re_new_password = $("#re_new_password").val();
         if(new_password==re_new_password){
         $.ajax({
             url:"${pageContext.request.contextPath}/user/mdfPassword",
             method: "POST",
             data: {
                 password:$("#new_password").val(),
             },
             dataType: "JSON",
             success:function (data) {
                 if(data.message=="ok") {
                     alert("修改成功")
                     cancel()
                 }else {
                     alert("修改失败")
                     cancel()
                 }
             }
         })
     } else {
             alert("两次输入密码不一致！操作失败")
         }
     }
</script>
</html>
